<template>
  <view class="container">
    <view class="example" style="width: 100%;height: 100%;border-radius: 1%;background-color: #eeeeee">
      <uni-forms ref="form" :model="this.product" labelWidth="80px">
        <uni-forms-item class="item1" name="shopsId" hidden>
          <uni-easyinput v-model="product.shopsId"    hidden/>
        </uni-forms-item>
        <uni-forms-item class="item1" label="商品名称" name="shopName">
          <uni-easyinput v-model="product.name" placeholder="请输入商品名称"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="商品编号" name="shopName">
          <uni-easyinput v-model="product.productNumber" placeholder="请输入商品编号"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="上传商品图片" name="shopLogo">
          <img class="item2" @click="chooseImage()" :src="product.images"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="商品价格" name="price">
          <uni-easyinput v-model="product.price" placeholder="请输入商品价格"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="商品分类" name="sortId">
          <uni-easyinput v-model="product.sortId" placeholder="请输入商品分类"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="商品状态" name="status" hidden>
          <uni-easyinput v-model="product.status" placeholder="请输入商品状态"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="品牌id" name="brandId">
          <uni-easyinput v-model="product.brandId" placeholder="请输入品牌id"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="总量" name="total">
          <uni-easyinput v-model="product.total" placeholder="请输入总量"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="品牌id" name="brandId">
          <uni-easyinput v-model="product.brandId" placeholder="请输入品牌id"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="商品描述" name="describe">
          <uni-easyinput v-model="product.describes" placeholder="请输入商品描述"   />
        </uni-forms-item>
        <uni-forms-item class="item1" label="备注" name="remark">
          <uni-easyinput v-model="product.remark" placeholder="请输入备注"   />
        </uni-forms-item>
      </uni-forms>
      <button type="primary"  @click="submit()" v-text="this.product.id=='undefined'? '提交':'修改'" ></button>
    </view>
  </view>
</template>

<script>
import { uploadAvatar, submitshop, getMarketersProfile} from "@/api/system/marketers"
import { getProductDetail,getParaValue,getParaName,getProductLunbo } from '@/api/product/product';
import {addShopProduct} from "../../api/product/product";
export default {
  data() {
    return {
      images: "",
      /*商家信息*/
      Echo: "1",
      id:'',
      product: {
        name: "",
        productNumber: "",
        price: "",
        sortId: "",
        shopsId: "",
        status: "",
        brandId: "",
        images: "",
        total: "",
        creator: "",
        createTime: "",
        updateTime: "",
        describes: "",
        remark: ""
      },
      sexs: [
        {
          text: '未审核',
          value: "0"
        }, {
          text: '未通过',
          value: "1"
        },
        {
          text: '通过',
          value: "2"
        }],
      rules: {
        nickName: {
          rules: [{
            required: true,
            errorMessage: '用户昵称不能为空'
          }]
        },
        phonenumber: {
          rules: [{
            required: true,
            errorMessage: '手机号码不能为空'
          }, {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            errorMessage: '请输入正确的手机号码'
          }]
        },
        email: {
          rules: [{
            required: true,
            errorMessage: '邮箱地址不能为空'
          }, {
            format: 'email',
            errorMessage: '请输入正确的邮箱地址'
          }]
        }
      }
    }
  },
  onLoad() {
    if (this.$route.query.id!=null || this.$route.query.id!="undefined"){
      this.id = this.$route.query.id
      this.getProduct(this.id)
    }
    //this.getMarketers()
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    submit(){
      this.product.shopsId = this.$route.query.shopsId
      console.log(JSON.stringify(this.product)+"/")
      this.$refs.form.validate().then(res => {
        addShopProduct(this.product).then(res=>{
          this.$modal.msgSuccess("添加成功")
        })
      })
      uni.navigateBack();
    },
    //获取商品
    getProduct(id){
      getProductDetail(id).then(resp=>{
        this.product = resp.data;
      })
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
            this.product.images = res.tempFiles[0].path;
          uploadAvatar(data).then(response => {
            if (response.data!= {}){
              this.product.images = response.data.url
            }
          })
        },
        fail: (err) => {
          console.log(err.errMsg);
        }
      });
    },
    getMarketers() {
      getMarketersProfile(this.$store.state.user.userId).then(response => {
        if (response.data!=null){
          this.Echo = "2";
          this.marketers = response.data
        }
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
}
.item1{
  /*width: 50%;*/
  /*margin-left: 30%;*/
}
.item2{

  width: 120px;
  height: 120px;
  /*margin-left: 50%;*/
  border: 1px solid;
}
.readonly{
  disable:true;
}
</style>
